<template>
  <nav class="app-nav">
    <div class="nav-inner">
      <router-link to="/" class="brand">工具集</router-link>
      <div class="links">
        <router-link to="/" class="nav-link">图片压缩</router-link>
        <router-link to="/json-formatter" class="nav-link">JSON 格式化</router-link>
        <router-link to="/scss-to-css" class="nav-link">SCSS 转 CSS</router-link>
        <router-link to="/rpx-px" class="nav-link">RPX ↔ PX</router-link>
        <router-link to="/wechat-template" class="nav-link">公众号消息</router-link>
        <AuthMenu />
      </div>
    </div>
  </nav>
</template>

<script setup>
// 简洁的导航栏组件，使用路由链接进行页面切换
import AuthMenu from './NavAuthMenu.vue'
</script>

<style scoped>
.app-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-primary);
  text-decoration: none;
}

.links {
  display: flex;
  gap: 12px;
}

.nav-link {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--color-text, #2b2b2b);
  text-decoration: none;
  font-weight: 600;
  transition: all .2s ease;
}

.nav-link:hover {
  background: var(--color-hover, #eef2ff);
  transform: translateY(-1px);
}

.nav-link.router-link-active {
  color: #fff;
  background: var(--color-primary);
}
</style>